<template>
  <div>
    <van-nav-bar @click-left="$router.go(-1)" :title="$route.name" left-arrow />

    <div v-if="getUserInfo" class="userinfo">
      <div class="my">
        <van-image
          class="tx"
          round
          width="1.8rem"
          height="1.8rem"
          src="http://m.imeitou.com/uploads/allimg/2018041208/ncngr5hrt5d.jpg"
        />

        <van-cell class="yhm" :value="getUserInfo.nickname" />
        <van-button class="tc" @click="logout" type="danger">退出</van-button>
      </div>

      <div class="wz">
        <van-cell title="地址管理" icon="location-o" />
        <van-cell title="我的钱包" icon="balance-o" />
        <van-cell title="我的小伙伴" icon="smile-o" />
        <van-cell title="我的二维码" icon="apps-o" />
        <van-cell title="0元试用" icon="refund-o" />
      </div>
    </div>

    <!-- 未登录 -->
    <div v-else class="userinfo">
      <van-image
        round
        width="2.2rem"
        height="2.2rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />

      <van-cell value="XXXX" />
      <van-button @click="$router.push('/login')" type="info">登录</van-button>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  components: {},
  methods: {
    ...mapActions(["changeUserAction"]),
    logout() {
      this.changeUserAction(false);

      this.$router.push("/login");
    },
  },
  computed: {
    ...mapGetters(["getUserInfo"]),
  },
};
</script>

<style lang="" scoped>
.van-nav-bar {
  background-color: rgb(255, 96, 64);
}

.userinfo {
  text-align: center;
  background-color: #ff6040;
}
.userinfo >>> .van-cell__value--alone {
  text-align: center;
}
.wz {
  text-align: left;
  
}

.tx {
  float: left;
}
.my{
  height: 4rem; 
}
.yhm{
  width: 1.6rem;
  height: 1.2rem;
   background-color: #ff6040;
   float: left;
   margin-top: .3rem;
} 
.yhm >>>.van-cell__value--alone{
  color: #fff;
  font-weight: bolder;
  font-size: 30px;
}
.tc{
  float: left;
  margin-top: .6rem;
  width: 1.4rem;
  height: .6rem;

}
</style>
